Dark Mode এবং Light Mode সাপোর্ট করা

Mobile App Development - ফ্লাটার (Flutter) - Flutter এ Styling এবং Theming

218

Flutter-এ Dark Mode এবং Light Mode সাপোর্ট করা খুব সহজ, এবং এটি অ্যাপ্লিকেশনের ব্যবহারকারীদের জন্য একটি গুরুত্বপূর্ণ ফিচার। আপনি Flutter এর ThemeData এবং MediaQuery ব্যবহার করে Dynamic Theme সাপোর্ট করতে পারেন, যাতে অ্যাপ্লিকেশন ডিভাইসের থিম পরিবর্তন অনুযায়ী স্বয়ংক্রিয়ভাবে রঙ পরিবর্তন করে। নিচে Flutter-এ Dark Mode এবং Light Mode সাপোর্ট করার বিস্তারিত প্রক্রিয়া দেওয়া হলো:

১. ThemeData ব্যবহার করা

Flutter-এ ThemeData ব্যবহার করে অ্যাপ্লিকেশনের জন্য ডার্ক এবং লাইট থিম ডিফাইন করা যায়। ThemeData অ্যাপ্লিকেশনের রঙ, টেক্সট স্টাইল, এবং অন্যান্য ভিজ্যুয়াল উপাদান কাস্টমাইজ করতে সাহায্য করে।

উদাহরণ: ডার্ক এবং লাইট মোড সাপোর্ট

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.black,
      ),
      themeMode: ThemeMode.system, // ডিভাইসের থিম অনুযায়ী পরিবর্তন হবে
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dark and Light Mode'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

কোডের ব্যাখ্যা

theme: এখানে লাইট মোডের জন্য থিম ডিফাইন করা হয়েছে, যেখানে brightness: Brightness.light এবং অন্যান্য প্রপার্টি লাইট থিম অনুযায়ী সেট করা হয়েছে।
darkTheme: ডার্ক মোডের জন্য থিম ডিফাইন করা হয়েছে, যেখানে brightness: Brightness.dark এবং ব্যাকগ্রাউন্ড কালার ব্ল্যাক সেট করা হয়েছে।
themeMode: ThemeMode.system সেট করা হয়েছে, যা ডিভাইসের সিস্টেম থিম অনুযায়ী অ্যাপ্লিকেশনের থিম পরিবর্তন করবে। এছাড়া, আপনি ThemeMode.light (সবসময় লাইট মোড) বা ThemeMode.dark (সবসময় ডার্ক মোড) সেট করতে পারেন।

২. MediaQuery ব্যবহার করে থিম সনাক্ত করা

Flutter-এ MediaQuery ব্যবহার করে বর্তমান থিম সনাক্ত করা এবং কাস্টম থিম তৈরি করা যায়। MediaQuery থেকে platformBrightness প্যারামিটার ব্যবহার করে আপনি ডিভাইসের থিম যাচাই করতে পারেন।

import 'package:flutter/material.dart';

class CustomThemeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ডিভাইসের বর্তমান থিম সনাক্ত করা হচ্ছে
    var brightness = MediaQuery.of(context).platformBrightness;
    bool isDarkMode = brightness == Brightness.dark;

    return MaterialApp(
      title: 'Custom Theme Demo',
      theme: isDarkMode
          ? ThemeData.dark().copyWith(
              primaryColor: Colors.grey[800],
            )
          : ThemeData.light().copyWith(
              primaryColor: Colors.blue,
            ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dark/Light Mode'),
      ),
      body: Center(
        child: Text('MediaQuery Dark/Light Mode Detection!'),
      ),
    );
  }
}

কোডের ব্যাখ্যা

MediaQuery এর মাধ্যমে ডিভাইসের বর্তমান থিম (platformBrightness) সনাক্ত করা হয়েছে।
isDarkMode চেক করা হচ্ছে ডার্ক থিম সক্রিয় আছে কিনা। এরপর, ThemeData.dark() বা ThemeData.light() অনুযায়ী থিম সেট করা হচ্ছে।

৩. Dynamic Theme পরিবর্তন করা (Toggle Feature)

আপনি চাইলে ব্যবহারকারীদের থিম পরিবর্তন করার সুবিধা দিতে পারেন। এক্ষেত্রে, একটি StatefulWidget ব্যবহার করে ব্যবহারকারীর পছন্দ অনুযায়ী Dynamic Theme পরিবর্তন করা যায়।

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;

  void _toggleTheme() {
    setState(() {
      _isDarkMode = !_isDarkMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: HomePage(toggleTheme: _toggleTheme),
    );
  }
}

class HomePage extends StatelessWidget {
  final VoidCallback toggleTheme;

  HomePage({required this.toggleTheme});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Dark/Light Mode'),
        actions: [
          IconButton(
            icon: Icon(Icons.brightness_6),
            onPressed: toggleTheme,
          )
        ],
      ),
      body: Center(
        child: Text('Click the icon to toggle theme!'),
      ),
    );
  }
}

কোডের ব্যাখ্যা

এখানে একটি StatefulWidget ব্যবহার করা হয়েছে, যেখানে _isDarkMode ভেরিয়েবলটি থিমের অবস্থা ট্র্যাক করে।
_toggleTheme() মেথড ব্যবহার করে থিম পরিবর্তন করা হয় এবং setState ব্যবহার করে UI আপডেট করা হয়।
IconButton এর মাধ্যমে ব্যবহারকারীরা থিম পরিবর্তন করতে পারেন।